//Set parameters
var options = {
    series: {
        lines: {
            show: true
        }
    },
    legend: {
        show: false
    },
    xaxis: {
        min: 0,
        max: 5
    },
    //yaxis: { min: 0 },
    selection: {
        mode: "x"
    }
};
var play_pid=0;
var time_step = 500;

//Initiate object handlers

var placeholder,overview,loading_tag;

function drawgraph() {
    plot = $.plot(placeholder, data, options);

    plot_overview = $.plot(overview, data, {
        legend: {
            show: false
        },
        series: {
            lines: {
                show: true,
                lineWidth: 1
            },
            shadowSize: 0
        },
        selection: {
            mode: "x"
        }
    });

    //show region in mini-window
    plot_overview.setSelection({
        xaxis: {
            from: 0,
            to: 5
        }
    }, true);

    loading_tag.hide();
}

function ZoomIn(event, ranges) {
    //Stop playback
    $('button#pause').click();
    // clamp the zooming to prevent eternal zoom
    if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) ranges.xaxis.to = ranges.xaxis.from + 0.00001;

    // do the zooming
    plot = $.plot(placeholder, data, $.extend(true, {}, options, {
        xaxis: {
            min: ranges.xaxis.from,
            max: ranges.xaxis.to
        }
    }));

    // don't fire event on the overview to prevent eternal loop
    plot_overview.setSelection(ranges, true);
}

function downloadData() {

    // find the URL in the link right next to us 
    var dataurl = ($(this).val() + '.json').replace('.json.json','.json');

    // then fetch the data with jQuery


    function onDataReceived(series) {
        // let's replace it to our current data
        data = [series];

        // and plot all we got
        drawgraph();
        loading_tag.hide();
    }

    loading_tag.show();
    $.getJSON(dataurl,onDataReceived);
}

function playback(x1, x2, xmax) {
    if (x2 >= xmax) return;

    //scroll the graph to the right
    plot = $.plot(placeholder, data, $.extend(true, {}, options, {
        xaxis: {
            min: x1,
            max: x2
        }
    }));
    //show region in mini-window
    plot_overview.setSelection({
        xaxis: {
            from: x1,
            to: x2
        }
    }, true);

    x1 += time_step / 1000;
    x2 += time_step / 1000;

    play_pid = setTimeout("playback(" + x1 + "," + x2 + "," + xmax + ")", time_step);
}


$(function () {
    placeholder = $("#placeholder");
    overview = $("#overview");
    loading_tag = $("#loading");

    //Selection handler
    placeholder.bind("plotselected", ZoomIn);
    overview.bind("plotselected", function (event, ranges) {
        $('button#pause').click();
        plot.setSelection(ranges);
    });

    //Dynamically download data
    $("select#series").change(downloadData);
    $('input#path').change(downloadData);
    $('button:contain("LoadData")').click(function(){
	$('input#path').change();});

    //ECG Playback
    $('button#playback').click(function () {
        var axes = plot.getAxes();
        var x1 = axes.xaxis.min;
        var x2 = axes.xaxis.max;

        var overview_axes = plot_overview.getAxes();
        var xmax = overview_axes.xaxis.max;
        //Scroll to the right
        playback(x1, x2, xmax);
    });

    $('button#pause').click(function () {
        //clear next scheduled task
        clearTimeout(play_pid);

    });

    //Draw default graph
    $("select#series").change();
});
